<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style_m.css" />
		<link rel="stylesheet" href="css/title_m.css" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			.mui-content{margin-bottom:80px;}
			.mui-input-group{background:#1a1a1a;color:#fff;}
			.mui-input-group .mui-input-row:after{height:0;}
			.mui-checkbox.mui-left input[type=checkbox], .mui-radio.mui-left input[type=radio]{left:10px;}
			.mui-card{background-color:#1a1a1a;box-shadow: none;}
			.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{font-size:20px;}/*设置复选框的大小*/
			.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{color:#dc4a3a;}/*选择后的颜色*/
			.mui-input-group .mui-input-row{height:auto;}/*设置每一复选框的高度为自动*/
			.mui-card .mui-table-view{margin-left:44px;margin-bottom:10px;background-color:#343434;}/*设置右侧列表的距离左侧的宽度*/
			.mui-media-body p{color:#fff;}
			.mui-media-body h6{display: flex;justify-content: space-between;}
			.mui-media-body h4{color:#dc4a3a;}
			.mui-table-view .mui-media-object{max-width:80px;width:80px;height:80px;}/*图片大小*/
			.mui-input-row .mui-numbox{margin:0;border:none;background:#343434;display:flex;flex-direction: row;}/*加减数量的边框*/
			.add_num{display: flex;flex-wrap: wrap;justify-content: space-between;}
			.mui-numbox [class*=btn-numbox], .mui-numbox [class*=numbox-btn]{background-color:#343434;color:#fff;}/*加减号的背景颜色*/
			.mui-numbox .mui-input-numbox, .mui-numbox .mui-numbox-input{background:#3e3e3e;border:none!important;padding:0 5px!important;width:30px!important;}/*按钮输入框*/
			.mui-media.mui-table-view-cell{padding:11px 8px 11px 15px;}
			.mui-media.mui-table-view-cell a.mui-active{background:none;}
			/*结算*/
			.mui-checkbox.mui-left label, .mui-radio.mui-left label{padding-left:44px;padding-right:0;line-height: 70px;}/*label距离左右两侧的距离*/
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">购物车</h1>
		</header>
		<div class="mui-content">
			<div class="mui-card">
				<form class="mui-input-group">
					<div class="mui-input-row mui-checkbox mui-left">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="images/shopping_cart.jpg">
									<div class="mui-media-body">
										<p class='mui-ellipsis-2'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
										<h6><span>白色</span><span style="padding-right:5px;">选服务</span></h6>
										<div class="add_num">
											<h4>￥238.00</h4>
											<!--商品数量增加-->
											<div class="mui-numbox" data-numbox-min='0' style="width:auto;height: 30px;">
												<button class="mui-btn-numbox-minus" type="button">-</button>
												<input class="mui-input-numbox" type="number" />
												<button class="mui-btn-numbox-plus" type="button">+</button>
											</div>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<input name="checkbox" value="Item 1" type="checkbox" >
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="images/shopping_cart.jpg">
									<div class="mui-media-body">
										<p class='mui-ellipsis-2'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
										<h6><span>白色</span><span style="padding-right:5px;">选服务</span></h6>
										<div class="add_num">
											<h4>￥238.00</h4>
											<!--商品数量增加-->
											<div class="mui-numbox" data-numbox-min='0' style="width:auto;height: 30px;">
												<button class="mui-btn-numbox-minus" type="button">-</button>
												<input class="mui-input-numbox" type="number" />
												<button class="mui-btn-numbox-plus" type="button">+</button>
											</div>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<input name="checkbox" value="Item 1" type="checkbox" >
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="images/shopping_cart.jpg">
									<div class="mui-media-body">
										<p class='mui-ellipsis-2'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
										<h6><span>白色</span><span style="padding-right:5px;">选服务</span></h6>
										<div class="add_num">
											<h4>￥238.00</h4>
											<!--商品数量增加-->
											<div class="mui-numbox" data-numbox-min='0' style="width:auto;height: 30px;">
												<button class="mui-btn-numbox-minus" type="button">-</button>
												<input class="mui-input-numbox" type="number" />
												<button class="mui-btn-numbox-plus" type="button">+</button>
											</div>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<input name="checkbox" value="Item 1" type="checkbox" >
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="images/shopping_cart.jpg">
									<div class="mui-media-body">
										<p class='mui-ellipsis-2'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
										<h6><span>白色</span><span style="padding-right:5px;">选服务</span></h6>
										<div class="add_num">
											<h4>￥238.00</h4>
											<!--商品数量增加-->
											<div class="mui-numbox" data-numbox-min='0' style="width:auto;height: 30px;">
												<button class="mui-btn-numbox-minus" type="button">-</button>
												<input class="mui-input-numbox" type="number" />
												<button class="mui-btn-numbox-plus" type="button">+</button>
											</div>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<input name="checkbox" value="Item 1" type="checkbox" >
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="images/shopping_cart.jpg">
									<div class="mui-media-body">
										<p class='mui-ellipsis-2'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
										<h6><span>白色</span><span style="padding-right:5px;">选服务</span></h6>
										<div class="add_num">
											<h4>￥238.00</h4>
											<!--商品数量增加-->
											<div class="mui-numbox" data-numbox-min='0' style="width:auto;height: 30px;">
												<button class="mui-btn-numbox-minus" type="button">-</button>
												<input class="mui-input-numbox" type="number" />
												<button class="mui-btn-numbox-plus" type="button">+</button>
											</div>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<input name="checkbox" value="Item 1" type="checkbox" >
					</div>
				</form>
			</div>
		</div>
		<!--结算-->
		<div class="jiesuan">
			<div class="mui-checkbox mui-left">
				<label>全选</label>
				<input name="checkbox" value="items" type="checkbox">
			</div>
			<div class="total"><span>合计：</span><b>￥200.00</b></div>
			<button id="jiesuan">去结算(1)</button>
		</div>
	</body>

</html>